{% block sw_multi_snippet_drag_and_drop %}
<div class="sw-multi-snippet-drag-and-drop">
    <mt-icon
        class="sw-multi-snippet-drag-and-drop__action"
        name="regular-grip-vertical"
        size="12"
    />

    <sw-select-base
        class="sw-multi-snippet-select"
        :is-loading="isLoading"
        :error="errorObject"
        v-bind="$attrs"
    >
        <template #sw-select-selection="{ identification, error, disabled, size, expand, collapse }">
            <ul
                ref="selectionList"
                class="sw-select-selection-list"
            >
                <!-- eslint-disable vue/no-use-v-if-with-v-for -->
                <li
                    v-for="(snippet, index) in value"
                    :key="index"
                    class="sw-select-selection-list__item-holder"
                    :class="'sw-select-selection-list__item-holder--' + index"
                    :data-id="snippet"
                >
                    <slot
                        name="selected-option"
                        v-bind="{ snippet, defaultLabel: snippet, disabled, linePosition }"
                    >
                        <sw-label
                            v-droppable="{ ...mergedDropConfig, data: { snippet, index, linePosition }}"
                            v-draggable="{ ...mergedDragConfig, data: { snippet, index, linePosition }}"
                            :dismissable="!isSelectionDisabled(snippet)"
                            :size="size"
                            @dismiss="onClickDismiss(index)"
                        >
                            <span class="sw-select-selection-list__item">
                                <slot
                                    name="label-property"
                                    v-bind="{ item: snippet, index, getLabelProperty }"
                                >
                                    {{ getLabelProperty(snippet) }}
                                </slot>
                            </span>
                        </sw-label>
                    </slot>
                </li>

                <li>
                    <slot name="input">
                        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
                        <input
                            class="sw-select-selection-list__input"
                            type="text"
                            :disabled="disabled"
                        >
                    </slot>
                </li>
            </ul>
        </template>
    </sw-select-base>

    <sw-context-button class="sw-multi-snippet-drag-and-drop__context-button">
        <sw-context-menu-item
            :disabled="isMaxLines"
            @click="openModal"
        >
            {{ $tc('sw-settings-country.general.actions.newSnippet') }}
        </sw-context-menu-item>

        <sw-context-menu-item
            :disabled="isMaxLines"
            @click="addNewLineAt('above')"
        >
            {{ $tc('sw-settings-country.general.actions.createBefore') }}
        </sw-context-menu-item>

        <sw-context-menu-item
            :disabled="isMaxLines"
            @click="addNewLineAt('below')"
        >
            {{ $tc('sw-settings-country.general.actions.createAfter') }}
        </sw-context-menu-item>

        <sw-context-menu-item
            :disabled="isMinLines"
            @click="moveToNewPosition(0)"
        >
            {{ $tc('sw-settings-country.general.actions.moveTop') }}
        </sw-context-menu-item>

        <sw-context-menu-item
            :disabled="isMinLines"
            @click="moveToNewPosition"
        >
            {{ $tc('sw-settings-country.general.actions.moveBottom') }}
        </sw-context-menu-item>

        <sw-context-menu-item
            variant="danger"
            :disabled="isMinLines"
            @click="onDelete"
        >
            {{ $tc('global.default.delete') }}
        </sw-context-menu-item>
    </sw-context-button>
</div>
{% endblock %}
